<template>  
  <div class="repair-upload">  
    <!-- 顶部导航栏 -->  
    <van-nav-bar  
      title="维修记录上传"  
      left-text="返回"  
      left-arrow  
      @click-left="onBack"  
      right-text="关闭"  
      @click-right="onClose"  
    />  

    <div class="content">  
      <!-- 维修记录单 -->  
      <div class="section">  
        <div class="section-title">维修记录单</div>  
        <van-cell-group>  
          <!-- 维修位置 -->  
          <van-cell title="维修位置" is-link @click="getRepairLocation">  
            <span class="grey-text">  
              点击上传记录自动获取本任务信息  
            </span>  
          </van-cell>  

          <!-- 开始时间 -->  
          <van-cell title="开始时间 *" is-link @click="selectStartTime">  
            <span class="grey-text">  
              (自动获取任务开始时间)  
            </span>  
          </van-cell>  

          <!-- 结束时间 -->  
          <van-cell title="结束时间 *" is-link @click="selectEndTime">  
            <span class="grey-text">  
              (自动获取当前时间)  
            </span>  
          </van-cell>  

          <!-- 维修时长 -->  
          <van-cell title="维修时长">  
            <span class="grey-text">  
              (系统自动计算时间) 1天20小时  
            </span>  
          </van-cell>  
        </van-cell-group>  
      </div>  

      <!-- 维修情况 -->  
      <div class="section">  
        <div class="section-title">维修情况 *</div>  
        <van-radio-group  
          v-model="form.completionStatus"  
          direction="horizontal"  
          @change="onCompletionStatusChange"  
        >  
          <van-radio name="complete">已完成</van-radio>  
          <van-radio name="incomplete">未完成</van-radio>  
        </van-radio-group>  
        <van-field  
          v-model="form.situation"  
          placeholder="请输入现场情况"  
          rows="3"  
          type="textarea"  
          autosize  
          maxlength="180"  
          show-word-limit  
        />  
        <van-uploader  
          v-model="repairPhotos"  
          :max-count="1"  
          :after-read="onPhotoUpload"  
        >  
          <template #upload>  
            <div class="photo-upload-icon">  
              <van-icon name="photograph" />  
            </div>  
          </template>  
        </van-uploader>  
      </div>  

      <!-- 汇报对象 -->  
      <div class="section">  
        <div class="section-title">汇报对象 *</div>  
        <div class="report-area">  
          <div  
            class="report-item"  
            v-for="(person, index) in form.reportTargets"  
            :key="index"  
            @click="removeTarget(index)"  
          >  
            <van-icon name="clear" class="remove-icon" />  
          </div>  
          <div class="add-report" @click="addReportTarget">  
            <van-icon name="plus" />  
          </div>  
        </div>  
      </div>  

      <!-- 抄送对象 -->  
      <div class="section">  
        <div class="section-title">抄送对象</div>  
        <div class="report-area">  
          <div  
            class="report-item"  
            v-for="(person, index) in form.ccTargets"  
            :key="index"  
            @click="removeCcTarget(index)"  
          >  
            <van-icon name="clear" class="remove-icon" />  
          </div>  
          <div class="add-report" @click="addCcTarget">  
            <van-icon name="plus" />  
          </div>  
        </div>  
      </div>  

      <!-- 提交按钮 -->  
      <van-button type="primary" block class="submit-button" @click="onSubmit">  
        立即提交  
      </van-button>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      form: {  
        completionStatus: "complete", // 是否完成  
        situation: "", // 现场情况  
        reportTargets: [], // 汇报对象  
        ccTargets: [], // 抄送对象  
      },  
      repairPhotos: [], // 上传的照片  
    };  
  },  
  methods: {  
    onBack() {  
      this.$router.go(-1);  
    },  
    onClose() {  
      this.$router.push("/home");  
    },  
    getRepairLocation() {  
      console.log("获取维修位置");  
    },  
    selectStartTime() {  
      console.log("选择开始时间");  
    },  
    selectEndTime() {  
      console.log("选择结束时间");  
    },  
    onCompletionStatusChange(value) {  
      console.log("完成状态改变：", value);  
    },  
    onPhotoUpload(file) {  
      console.log("上传照片：", file);  
    },  
    addReportTarget() {  
      console.log("添加汇报对象");  
    },  
    removeTarget(index) {  
      this.form.reportTargets.splice(index, 1);  
    },  
    addCcTarget() {  
      console.log("添加抄送对象");  
    },  
    removeCcTarget(index) {  
      this.form.ccTargets.splice(index, 1);  
    },  
    onSubmit() {  
      event.preventDefault();
      //  inspectionRecordUpload(this.form).then((response) => {
      //     console.log(response)
      //     if(response.code == 200 ){
      //        this.$message({ message: '上传成功!', type: 'success',  duration: 1000, // 提示持续时间（毫秒）  
      //           onClose: () => {  
      //               this.$router.push({ path: '/inspection' }); // 在提示关闭后跳转  
      //           }  
      //       });  
             
      //     }
      //   }).catch(() => {
      //     this.$message.error("获取数据失败");
      //   });  
        this.$message({ message: '上传成功!', type: 'success',  duration: 1000, // 提示持续时间（毫秒）  
                onClose: () => {  
                    this.$router.push({ path: '/inspection' }); // 在提示关闭后跳转  
                }  
            });  
      
    },  
  },  
};  
</script>  

<style scoped>  
/* 容器 */  
.repair-upload {  
  background-color: #f4f4f4;  
  min-height: 100vh;  
}  

/* 顶部导航栏 */  
.van-nav-bar {  
  position: sticky;  
  top: 0;  
  z-index: 10;  
  background-color: #ffffff;  
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);  
}  

/* 内容区域 */  
.content {  
  padding: 16px;  
}  

/* 小节 */  
.section {  
  margin: 16px 0;  
  padding: 12px;  
  background: #ffffff;  
  border-radius: 8px;  
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);  
}  

/* 小节标题 */  
.section-title {  
  font-size: 16px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  

/* 输入提示 */  
.grey-text {  
  color: #888;  
}  

/* 上传图片图标 */  
.photo-upload-icon {  
  width: 80px;  
  height: 80px;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  border: 1px dashed #ccc;  
  border-radius: 6px;  
  color: #888;  
}  

/* 汇报/抄送对象区域 */  
.report-area {  
  display: flex;  
  flex-wrap: wrap;  
}  

.report-item {  
  width: 40px;  
  height: 40px;  
  background-color: #ccc;  
  margin-right: 8px;  
  margin-bottom: 8px;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  border-radius: 4px;  
  position: relative;  
}  

.remove-icon {  
  position: absolute;  
  top: -5px;  
  right: -5px;  
  background: #fff;  
  border-radius: 50%;  
  color: red;  
  font-size: 12px;  
}  

.add-report {  
  width: 40px;  
  height: 40px;  
  background-color: #f0f0f0;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  margin-right: 8px;  
  margin-bottom: 8px;  
  border-radius: 4px;  
  color: #888;  
}  

/* 提交按钮样式 */  
.submit-button {  
  margin-top: 24px;  
}  
</style>